<!DOCTYPE html>
<html>
<head lang="en">
    {include file="_public/_head"/}
    <style>
        .header {
            text-align: center;
        }

        .header h1 {
            font-size: 200%;
            color: #333;
            margin-top: 30px;
        }

        .header p {
            font-size: 14px;
        }
    </style>
</head>
<body>
{include file="_public/_header"/}
<div class="header">
    <div class="am-g">
        <h1>溪边居民宿</h1>
        <p>(后岸农家乐69号)</p>
    </div>
</div>
<div class="am-g">
    <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered">
        <h3>登录</h3>
        <div class="am-alert" style="display: none;"></div>
        <form method="post" class="am-form" id="ajaxForm">
            <label for="cellphone">手机号码:</label>
            <input type="number" name="" id="cellphone" value="" placeholder="手机号码">
            <br>
            <label for="password">密码:</label>
            <input type="password" name="" id="password" value="" placeholder="默认密码是手机后6位">
            <br>
            <label for="remember-me">
                <input id="remember-me" type="checkbox">
                记住密码
            </label>
            <br/>
            <div class="am-cf">
                <input type="button" name="" value="登 录"
                       data-am-loading="{spinner: 'circle-o-notch', loadingText: '登录中...', resetText: '重新登录'}"
                       class="am-btn am-btn-primary btn-loading-example" id="Login">
                <input type="button" name="" value="忘记密码 ^_^? " class="am-btn am-btn-default am-btn-sm am-fr">
            </div>
        </form>
        <hr>
    </div>
</div>
{include file="_public/_footer"/}
<script>
    $(function () {
        $('#Login').on('click', function () {
            if ($(this).attr('disabled') != 'disabled') {
                var data = {
                    cellphone: $('#cellphone').val(),
                    password: $('#password').val()
                };
                if ('' == data.cellphone) {
                    alertShow('请输入手机号码');
                    return false;
                }
                if ('' == data.password) {
                    alertShow('请输入密码');
                    return false;
                }
                $.ajax({
                    type: 'POST',
                    url: "/login",
                    data: data,
                    async: false,
                    dataType: 'post',
                    beforeSend: function () {
                        $('#Login').button('loading');
                    },
                    success: function (data) {
                        $('#Login').button('reset');
                        alertShow(data.message);
                        if('SUCCESS' == data.message){
                            window.location = 'login.html';
                        }
                    },
                    error: function (data) {
                        $('#Login').button('reset');
                        alertShow(data.message)
                    }
                });
            }
        })
    });

    function alertShow(msg) {
        $('.am-alert').html(msg).show();
    }
</script>
</body>
</html>
